<template>

    <div>
        <div class="header-sum-card">
            <Row :gutter="20" class="mt10">
                <Col class="mb10" :lg="24" :md="24" :sm="24" :xs="24">
                    <Modal v-model="addImage" cancel-text>
<!--                        <p slot="header" style="color:#f60;text-align:center">-->
<!--                            <Icon type="information-circled"></Icon>-->
<!--                            <span>删除确认</span>-->
<!--                        </p>-->
                        <div style="text-align:center;padding-top: 20px">
                            <Upload
                                    :on-error="uploadErrorMessage"
                                    :on-success="uploadSuccessMessage"
                                    multiple
                                    type="drag"
                                    :action="this.$uploadImage+'photos'">

                                <div style="padding: 20px 0">
                                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                    <p>点击或将文件拖拽到这里上传</p>
                                </div>
                            </Upload>
                        </div>
                        <div slot="footer">
                        </div>
                    </Modal>
                    <Card>
                        <div style="text-align: right">
                            <Button style="margin-left: 15px;" size="large" type="info" @click="addImage=true">添加</Button>
                        </div>
                    </Card>
                </Col>
                <Col class="mb10" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in imageData">

                    <Card>
                        <img :src="item.photoUrl" alt="" style="border-radius: 5px;width: 100%;">
                        <div>
                            <div style="text-align: right">
                                <p><span class="type-status-time">上传时间：</span>{{dateFilter(item.createTime)}}</p>
                                <Button v-show="item.published==1?false:true" style="margin-right: 10px" type="success" @click="editImage(item)">发布</Button>
                                <Button type="error" @click="deleteImage(item)">{{item.published==1?'回收站':'删除'}}</Button>
                            </div>
                        </div>
                    </Card>
                </Col>

            </Row>
            <!--                        分页导航栏-->
            <div style="text-align: center;margin-top: 10px;">

                <Page v-show="this.totals===0?false:true" :total="totals" show-sizer @on-change="page"
                      @on-page-size-change="changePageSize" :page-size-opts="[8,16,24]" :page-size="8"/>
            </div>

        </div>
        <template>
            <BackTop :height="100" :bottom="50">
                <div style="background-color:#76A09D;border-radius: 50%">
                    <Icon type="md-arrow-round-up"/>
                </div>
            </BackTop>
        </template>
    </div>

</template>
<script>
    export default {
        data() {
            return {
                //控制上传图片组件的弹出与隐藏
                addImage: false,
                imageData: [],
                //分页
                totals: 0,
            }
        },
        created(){
            this.getImageList();
        },

        methods: {
            uploadSuccessMessage(response){
                this.addImage = !this.addImage;
                if (response.code === 200){
                    this.$Message.success(response.message);
                    //当上传成功再请求服务端刷新页面
                    this.getImageList();
                }



            },
            uploadErrorMessage(response){
                this.addImage = !this.addImage;
                this.$Message.error(response.message);
            },
            //重新发布的方法
            async editImage(item){
                const {data: result} = await this.$http.get("photos/"+item.id+"/add")
                if (result.code === 200){
                    this.$Message.success(result.message)
                    window.setTimeout(function () {
                        location.reload()
                    },100);
                }
            },
            //删除或回收站方法
            async deleteImage(item) {
                const {data: result} = await this.$http.get("photos/"+item.id+"/"+item.published+"/delete")
                if (result.code === 200){
                    this.$Message.success(result.message)
                    window.setTimeout(function () {
                        location.reload()
                    },100);
                }
            },
            //获取图片列表
            async getImageList() {
                const {data: result} = await this.$http.get("getImageList/0/8")
                if (result.code === 200) {
                    this.imageData = result.data.content
                    this.totals = result.data.totalElements;
                } else {
                    this.$Message.error(result.message)
                }
            },
            //分页方法
            async page(currentPage) {
                const {data: result} = await this.$http.get("getImageList/" + (currentPage - 1) + "/8");
                if (result.code === 200) {
                    this.imageData = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
            //改变每页显示条数的方法
            async changePageSize(pageSize) {
                const {data: result} = await this.$http.get("getImageList/0/" + pageSize);
                if (result.code === 200) {
                    this.imageData = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
            //格式化时间的方法
            dateFilter: function (input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
                var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
                var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
                var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
                var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
                return (year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds);
            },

        }


    }
</script>
<style scoped lang="less">
    .mt10 {
        margin-top: 10px;
    }

    .tc {
        text-align: center
    }

    .header-sum-card {
        font-family: 幼圆;

        span.num {
            font-size: 30px;
        }
    }

    .type-status-time {
        font-size: 16px;
        font-weight: bolder;
    }
</style>
